﻿@import (reference) './variables.less';

html {
  --doc-border-color: @c-border;
  &[data-prefers-color='dark'] {
    --doc-border-color: @c-border-dark;
    .doc-demo-title {
      color: #959da6;
    }
  }
}

body,
.__dumi-default-menu-inner,
.__dumi-default-layout-toc {
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

.__dumi-default-menu {
  .__dumi-default-menu-list > li > a {
    padding-left: 24px !important;
    font-size: 14px;
    &:not([href]) {
      margin: 0 24px;
      padding-bottom: 14px;
      padding-left: 0 !important;
      border-bottom: 1px solid var(--doc-border-color);
    }

    ~ ul {
      margin-left: 24px !important;
    }
  }
}

.markdown table {
  max-width: 100vw !important;
}

.markdown h3 {
  font-size: 17px;
}

div > .markdown:first-child > :first-child {
  margin-top: 0 !important;
}

.__dumi-default-locale-select {
  margin-right: 16px;
  margin-left: 16px !important;
}

.__dumi-default-layout-hero {
  background-color: @c-primary !important;
  background-repeat: no-repeat;
  background-position: 90% center;
  background-size: contain;
  transition: 0.3s all;

  &:hover {
    background-position-y: -20px;
  }

  h1 {
    color: #fff !important;
    font-size: 36px !important;
  }

  div > p {
    color: #fff;
  }

  a:last-child button {
    color: @c-primary !important;
    font-weight: 600 !important;
    background: #fff !important;
  }
}

.__dumi-default-layout-features {
  grid-template-columns: repeat(4, 1fr) !important;
  max-width: 1060px !important;
  dt {
    font-weight: bold !important;
  }
}

.__dumi-default-navbar {
  padding-left: 24px !important;
  &-logo {
    background-size: 34px !important;
  }
}

.cvmComponents_dark_theme_view {
  height: 64px;
  background-color: #fff;
}

@media screen and (max-width: 680px) {
  .cvmComponents_dark_theme_view {
    height: 50px;
  }
}

ul[role='slug-list'] > li:first-child {
  display: none;
}
